<template>
	<headerNavbarVue v-if="operate==1" title='新增出行人'></headerNavbarVue>
	<headerNavbarVue v-if="operate==2" title='修改联系人'></headerNavbarVue>
	<view class="content">
		<view class="add-box">
			<view class="add-card">
				<view class="form-box">
					<view class="title">
						出行人信息
					</view>
					<view class="input-title">
						<image src="../../static/eIcones/aboutMyIcon.png" mode=""></image>
						<view>确保出行人姓名与所须证件一致</view>
					</view>
					<view class="form">
						<view class="input">
							<text>与本人的关系</text>
							<picker @change="bindPickerChange" :range="array">
								<input type="text" disabled="true" v-model="addPerson.travelers_relationship" name="Name"
									placeholder="请选择与本人的关系" placeholder-class="inputstyle" />
							</picker>
						</view>
						<view class="input">
							<text>姓名</text>
							<input type="text" name="Name" placeholder="请输入姓名" placeholder-class="inputstyle"
								v-model="addPerson.travelers_name" />
						</view>

						<view class="input">
							<text>身份证号</text>
							<input type="tel" v-model="addPerson.travelers_card_number" @input="parseIdCard" name=""
								placeholder="请输入证件号码" placeholder-class="inputstyle" />
						</view>
						<view class="input">
							<text>性别</text>
							<input type="tel" v-model="addPerson.travelers_gender" name="" disabled
								placeholder="将根据身份证自动带出" placeholder-class="inputstyle" />
						</view>
						<view class="input">
							<text>出生日期</text>
							<input type="tel" v-model="addPerson.travelers_birthday" name="" disabled
								placeholder="将根据身份证自动带出" placeholder-class="inputstyle" />
						</view>
						<view class="input">
							<text>手机号</text>
							<input type="tel" v-model="addPerson.travelers_phone" name="" placeholder="请输入手机号"
								placeholder-class="inputstyle" />
						</view>

					</view>
				</view>
			</view>
		</view>
		<view v-if="operate==1" class="footer" @click="back">
			下一步
		</view>
		<view v-if="operate==2" class="footer-de" @click="deleteTraveler">
			删除出行人
		</view>
		<view v-if="operate==2" class="footer" @click="edit">
			确认修改
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import headerNavbarVue from '../../components/headerNavbar.vue';
	import {
		IntoTravelers,
		GetTravelers,
		deleteTravelers,
		ReviseTravelers
	} from '../../config/API/Travelers';
	onLoad(async (e) => {
		console.log('页面参数', e);
		operate.value = e.operate
		travelerid.value = e.travelerid
		if (operate.value == 2) {
			// 编辑时获取对应出行人的信息
			const res = await GetTravelers(travelerid.value);
			console.log('获取的出行人信息', res.data[0]);

			// 将获取的数据填充到表单中
			const travelerData = res.data[0];
			addPerson.value = {
				...travelerData,
				travelers_relationship: array.value[travelerData.travelers_relationship], // 转换为文本显示
				travelers_gender: travelerData.travelers_gender === 0 ? '男' : '女', // 转换为文本显示
			};
			GenderCode.value = travelerData.travelers_gender; // 保留原始数值
			relationshipCode.value = travelerData.travelers_relationship; // 保留原始数值
		}


	})
	const operate = ref()
	//我的id
	const travelerUserId = ref(uni.getStorageSync('userInfo').id)
	//被修改用户
	const travelerid = ref()
	const userid = ref(1)
	const addPerson = ref({
		travelers_user_id: travelerUserId.value,
		travelers_relationship: '',
		travelers_name: '',
		travelers_card_number: '',
		travelers_gender: '',
		travelers_birthday: '',
		travelers_phone: '',
		travelers_card_type: 0,
		travelers_email: ''
	});
	const GenderCode = ref()
	const relationshipCode = ref()
	const array = ref(['本人', '父母', '夫妻', '子女', '朋友', '其他']);

	// 请求
	const AddIntoTravelers = async (itform) => {
		try {
			const res = await IntoTravelers(itform)
			console.log('添加结果==>', res);
			return res
		} catch (error) {
			console.log('error', error);
		}
	}

	// 身份证号解析函数
	const parseIdCard = () => {
		if (addPerson.value.travelers_card_number.length === 18) {
			const genderCode = addPerson.value.travelers_card_number.substring(16, 17);
			const birthYear = addPerson.value.travelers_card_number.substring(6, 10);
			const birthMonth = addPerson.value.travelers_card_number.substring(10, 12);
			const birthDay = addPerson.value.travelers_card_number.substring(12, 14);

			// 自动填充性别和出生日期
			addPerson.value.travelers_gender = genderCode % 2 === 0 ? '女' : '男';
			GenderCode.value = genderCode % 2 === 0 ? 1 : 0; // 提交时转为数字
			addPerson.value.travelers_birthday = `${birthYear}-${birthMonth}-${birthDay}`;
		} else {
			addPerson.value.travelers_gender = '';
			addPerson.value.travelers_birthday = '';
		}
	};

	// 选择关系时更新
	const bindPickerChange = (e) => {
		addPerson.value.travelers_relationship = array.value[e.detail.value];
		relationshipCode.value = e.detail.value; // 提交时保存数值
		console.log('选择关系', addPerson.value.travelers_relationship);
	};

	// 校验输入的内容
	const validateForm = () => {
		// 校验关系选择
		if (!addPerson.value.travelers_relationship) {
			uni.showToast({
				title: '请选择与本人的关系',
				icon: 'none',
			});
			return false;
		}
		// 校验姓名
		if (!addPerson.value.travelers_name) {
			uni.showToast({
				title: '请输入姓名',
				icon: 'none',
			});
			return false;
		}

		// 校验身份证号
		const idCardReg = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])\d{3}[0-9Xx]$/;
		if (!idCardReg.test(addPerson.value.travelers_card_number)) {
			uni.showToast({
				title: '请输入有效的身份证号',
				icon: 'none',
			});
			return false;
		}

		// 校验手机号
		const phoneReg = /^1[3-9]\d{9}$/;
		if (!phoneReg.test(addPerson.value.travelers_phone)) {
			uni.showToast({
				title: '请输入有效的手机号',
				icon: 'none',
			});
			return false;
		}



		return true;
	};

	// 返回并校验表单
	const back = async () => {
		if (validateForm()) {
			const submitForm = {
				...addPerson.value,
				travelers_gender: Number(GenderCode.value),
				travelers_relationship: Number(relationshipCode.value)
			}
			console.log('提交数据', submitForm);
			try {
				const res = await AddIntoTravelers(submitForm)
				if (res.code == 200) {

					uni.navigateBack({
						delta: 1,
						success() {
							console.log('返回数据', addPerson.value);
						}
					})
					setTimeout(() => {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}, 200)
				} else {
					uni.showToast({
						title: res.msg || '网络异常',
						icon: 'none'
					})
				}
			} catch (error) {
				console.log('编辑提交出错', error);
				uni.showToast({
					title: '网络异常',
					icon: 'none'
				});
			}
		}
	};
	//修改时
	const edit = async () => {
		if (validateForm()) {
			const submitForm = {
				...addPerson.value,
				travelers_gender: Number(GenderCode.value),
				travelers_relationship: Number(relationshipCode.value),
				travelers_user_id: Number(travelerUserId.value),
				travelers_id: Number(travelerid.value)
			};

			console.log('编辑提交数据', submitForm);

			try {
				const res = await ReviseTravelers(submitForm); // 假设此接口用于编辑
				console.log('res', res);
				if (res.code == 200) {

					uni.navigateBack({
						delta: 1
					});
					setTimeout(() => {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}, 200)
				} else {
					uni.showToast({
						title: res.msg || '修改失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.log('编辑提交出错', error);
				uni.showToast({
					title: '网络异常',
					icon: 'none'
				});
			}
		}
	};
	//删除联系人
	const deleteTraveler = async () => {
		if (travelerid.value) {
			try {
				const res = await deleteTravelers(travelerid.value); // 假设此接口用于编辑
				console.log('res', res);
				if (res.code == 200) {

					uni.navigateBack({
						delta: 1
					});
					setTimeout(() => {
						uni.showToast({
							title: '成功删除联系人',
							icon: 'none'
						});
					}, 200)
				} else {
					uni.showToast({
						title: '删除失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.log('编辑提交出错', error);
				uni.showToast({
					title: '网络异常',
					icon: 'none'
				});
			}
		} else {
			uni.showToast({
				title: '网络异常',
				icon: 'none'
			});
		}

	}
</script>

<style scoped>
	.content {
		background: rgba(248, 248, 248, 1.0);
		height: 100vh;
	}

	.add-box {
		padding: 20rpx;
		box-sizing: border-box;
	}

	.add-card {
		display: flex;
		flex-direction: column;
		gap: 50rpx;
		margin-top: 10rpx;
	}

	.title {
		padding-bottom: 20rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid rgba(246, 246, 246, 1.0);
		font-weight: bold;
	}

	.form-box {
		width: 98%;
		margin: 20rpx auto;
		border-radius: 10.76rpx;
		background: rgba(255, 255, 255, 1);
		padding: 16rpx 18rpx;
		box-sizing: border-box;
	}

	.form {
		display: flex;
		flex-direction: column;
		gap: 50rpx;
		margin-top: 20rpx;
	}

	.input-title {
		display: flex;
		gap: 10rpx;
		margin-top: 10rpx;
	}

	.input-title>view {
		font-size: 22rpx;
		color: rgba(96, 96, 96, 1);
	}

	.input-title image {
		width: 28rpx;
		height: 28rpx;
	}

	.input {
		display: flex;
		gap: 40rpx;
		align-items: center;
		color: rgba(56, 56, 56, 1);
		font-size: 24rpx;
		font-weight: 400;
	}

	.input text {
		width: 30%;
		color: rgba(56, 56, 56, 1);
		font-size: 26rpx;
		font-weight: 400;
	}

	.input image {
		width: 20rpx;
		height: 20rpx;
	}

	/deep/.inputstyle {
		font-size: 26rpx;
		font-weight: 400;
		color: rgba(196, 196, 196, 1);
	}

	.footer {
		bottom: 0;
		width: 96%;
		margin: 0 auto;
		background-color: #000;
		border-radius: 10rpx;
		color: #fff;
		font-size: 30rpx;
		padding: 18rpx;
		box-sizing: border-box;
		text-align: center;
		margin-top: 80rpx;
	}

	.footer-de {
		bottom: 0;
		width: 96%;
		margin: 0 auto;
		background-color: #c10000;
		border-radius: 10rpx;
		color: #fff;
		font-size: 30rpx;
		padding: 18rpx;
		box-sizing: border-box;
		text-align: center;
		margin-top: 80rpx;
	}
</style>